<template>
  <div class="navBar">
    <span class="navbar-logo">我的游戏平台</span>
    <!-- 导航按钮 -->
    <button @click="goHome">首页</button>
    <button @click ="activeTab = 'about'">关于我们</button>
    <button @click ="activeTab = 'contact'">联系我们</button>
    <!-- 登录按钮只在未登录时显示 -->
    <div v-if="loginStatus!=='true'" class="login-button">
      <button  @click="activeTab= 'login'">登录</button>
      <button  @click="showRegister = true">注册</button>
    </div>
    <!-- 当登录时显示退出按钮 -->
    <div v-if="loginStatus ==='true'" class="login-button">
      <button  @click="activeTab= 'logout'">退出</button>
    </div>
  </div>
  <!-- 注册弹窗 -->
  <div v-if="showRegister" class="register-content">
    <div class="register-modal">
      <form class="register-form" @submit.prevent="handleRegister">
        <h3>用户注册</h3>
        <input v-model="registerForm.userName" type="text" placeholder="用户名" class="register-input" required />
        <input v-model="registerForm.nickName" type="text" placeholder="昵称" class="register-input" required />
        <input v-model="registerForm.password" type="password" placeholder="密码" class="register-input" required />
        <input v-model="registerForm.phonenumber" type="text" placeholder="手机号" class="register-input" required />
        <select v-model="registerForm.sex" class="register-input" required>
          <option value="">请选择性别</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
        <select v-model="registerForm.role" class="register-input" required>
          <option value="user">普通用户</option>
          <option value="admin">管理员</option>
        </select>
        <div class="register-btns">
          <button type="submit" class="register-btn">注册</button>
          <button type="button" class="register-btn cancel" @click="showRegister = false">取消</button>
        </div>
      </form>
    </div>
  </div>
  <!-- 账号密码输入弹窗 -->
  <div v-if="activeTab === 'login'" class="login-content">
    <!-- 登录弹窗 -->
    <div class="login-modal">
      <form class="login-form">
        <h3>用户登录</h3>
        <input v-model="loginForm.userName" type="text" placeholder="用户名" class="login-input" />
        <input v-model="loginForm.password" type="password" placeholder="密码" class="login-input" />
        <div class="login-btns">
          <button type="submit" class="login-btn" @click.prevent="handleLogin">登录</button>
          <button type="button" class="login-btn" @click="activeTab = null">取消</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 退出系统确认弹窗 -->
  <div v-if="activeTab === 'logout'" class="login-content">
    <!-- 退出弹窗 -->
    <div class="login-modal">
      <form class="login-form">
        <h3>确认退出？</h3>
        <button type="submit" class="login-btn" @click.prevent="handleLogout">确认</button>
        <button type="submit" class="login-btn" @click.prevent="activeTab = 'home'">取消</button>
      </form>
    </div>
  </div>
  
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from '../axios/axios'
import { useRouter } from 'vue-router'

const activeTab = ref(null)
const router = useRouter()
const loginForm = ref({
  userName: '',
  password: ''
})
// 响应式登录状态
const loginStatus = ref(localStorage.getItem('isLoggedIn'))

function updateLoginStatus() {
  loginStatus.value = localStorage.getItem('isLoggedIn')
}

onMounted(() => {
  window.addEventListener('show-login-dialog', () => {
    activeTab.value = 'login'
  })
  window.addEventListener('storage', updateLoginStatus)
})
onUnmounted(() => {
  window.removeEventListener('show-login-dialog', () => {
    activeTab.value = 'login'
  })
  window.removeEventListener('storage', updateLoginStatus)
})

const showRegister = ref(false)
const registerForm = ref({
  userName: '',
  nickName: '',
  password: '',
  phonenumber: '',
  sex: '',
  role: 'user',
})

const handleLogin = async () => {
  try {
    const response = await axios.post('/login', loginForm.value)
    if (response.data.code === 200) {
      localStorage.setItem('token', response.data.data.token)    
      localStorage.setItem('role',response.data.data.role)
      localStorage.setItem('userName',response.data.data.userName)
      alert(response.data.data.userName+'欢迎登录!')
      localStorage.setItem('isLoggedIn','true')
      updateLoginStatus()
      console.log('loginStatus after login:', loginStatus.value)
      activeTab.value = null
      if(response.data.data.role === 'admin'){
        router.push('/GameManagement')
      }else{
        router.push('/Logined')
      }
    } else {
      alert('登录失败,' + response.data)
      activeTab.value = null
    }
  } catch (error) {
    alert('网络请求出错')
    console.error('请求失败:', error)
  }
}

// 退出登录方法
const handleLogout = async() => {
  await axios.delete('/userlogout')
  // 清除登录状态
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('token')
  localStorage.removeItem('userName')
  localStorage.removeItem('role')
  updateLoginStatus()
  // 跳转到登录页
  router.push('/login')
}

// 首页跳转到 /Logined
function goHome() {
  router.push('/Logined')
}

async function handleRegister() {
  try {
    const res = await axios.post('http://localhost:8080/user/register', registerForm.value)
    if (res.data && res.data.code === 200) {
      alert('注册成功！请登录')
      showRegister.value = false
      registerForm.value = { userName: '', nickName: '', password: '', phonenumber: '', sex: '', role: 'user' }
    } else {
      alert('注册失败：' + res.data)
    }
  } catch (e) {
    alert('网络错误或服务器异常')
  }
}

</script>

<style scoped>
.navBar {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(90deg, #232946 80%, #181a20 100%);
  color: #e0e6f0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px #23294688;
  border-bottom: 2px solid #4e8cff44;
}

.navbar-logo {
  font-size: 20px;
  font-weight: bold;
  color: #4e8cff;
  margin-right: 18px;
  margin-left: 24px;
  letter-spacing: 2px;
  white-space: nowrap;
  text-shadow: 0 2px 12px #4e8cff44;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #4e8cff;
}

.nav-buttons {
  display: flex;
  gap: 16px;
}

.login-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
}

.login-modal {
  background-color: #2d2d2d;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  width: 300px;
  color: white;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.login-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 12px;
}

.login-button button,
.navBar button {
  background: transparent;
  color: #e0e6f0;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 6px #23294622;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  margin-left: 8px;
}
.login-button button:hover,
.navBar button:hover {
  background: linear-gradient(90deg, #4e8cff 0%, #232946 100%);
  color: #fff;
  box-shadow: 0 4px 16px #4e8cff55, 0 0 8px #4e8cff88;
  transform: scale(1.05);
}

.register-btns button {
  background: linear-gradient(90deg, #4e8cff 0%, #6ed0ff 100%);
  color: #232946;
  border: none;
  border-radius: 8px;
  padding: 8px 24px;
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 6px #4e8cff22;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.register-btns button:hover {
  background: linear-gradient(90deg, #6ed0ff 0%, #4e8cff 100%);
  color: #fff;
  box-shadow: 0 4px 16px #4e8cff55;
  transform: scale(1.05);
}
.register-btns .cancel {
  background: #232946;
  color: #7fa7d6;
}
.register-btns .cancel:hover {
  background: #4e8cff;
  color: #fff;
}
.login-btns {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.login-btn {
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
  background: linear-gradient(90deg, #4e8cff 0%, #6ed0ff 100%);
  color: #232946;
  border: none;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  font-weight: bold;
  box-shadow: 0 1px 6px #4e8cff22;
}
.login-btn:hover {
  background: linear-gradient(90deg, #6ed0ff 0%, #4e8cff 100%);
  color: #fff;
  box-shadow: 0 4px 16px #4e8cff55;
  transform: scale(1.05);
}
</style>